$(function(){
	var index = 0;
	var timer = null;

	timer = setInterval(function(){
		nextPage(true);
	},2200);

	$('.icon_r').click(function(){
		nextPage(true);
	})
	$('.icon_l').click(function(){
		nextPage(false);
	})

	$("#viewwrap").mouseover(function(){

		if (timer) {
			clearInterval(timer)
		}
	}).mouseout(function(){
		timer = setInterval(function(){
			nextPage(true);
		},2200);

	})

	function nextPage(boolv){
		$('.num').removeClass("focus")
		var targetlen = 0;
		//判断当前在第几张
		var len = $('.num').length;
		if (boolv) {//下一页
			index++;
			targetlen = -1000 * (index+1);
			$("#imgs").css("transform","translate3d("+ targetlen + "px,0,0)");
			//加过渡效果
			$("#imgs").css("transition","transform 2s")

			if(index == len) {
				index =0;
				//重置targetlen
				//延迟执行
				setTimeout(function(){
					targetlen = -1000;
					$("#imgs").css("transform","translate3d("+ targetlen + "px,0,0)");
					//停止过渡效果
					$("#imgs").css("transition","")
				},2000)
			}
			
		} else{//上一页

			index--;
			targetlen = -1000 * (index+1);
			$("#imgs").css("transform","translate3d("+ targetlen + "px,0,0)");
			//加过渡效果
			$("#imgs").css("transition","transform 2s")

			if(index == -1) {
				index =4;
				//重置targetlen

				setTimeout(function(){
					targetlen = -1320*len;
					$("#imgs").css("transform","translate3d("+ targetlen + "px,0,0)");
					//停止过渡效果
					$("#imgs").css("transition","")
				},2000)
			}
			
		}
		//偏移
		$('.num')[index].classList.add('focus');
	}
})